<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../三段/3段考试/bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../../三段/3段考试/jquery.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'c5b3373591dcf4cc8c26437d2e1e0865',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3dd112b6c921ebaf2797b1a0887983d0"></script>
    <script src="../1次/echarts/china.js"></script>
    <script src="../1次/echarts/echarts.js"></script>
    
    <script src="../../三段/3段考试/bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100%;
        height: 100%;
        background-color: #ccc;
    }
    .box1{
        width: 100%;
        height: 530px;
        background-color: #ccc;
    }
    .box2{
        width: 400px;
        height: 500px;
        background-color: #ccc;
        float: left;
    }
    .box3{
        height: 250px;
        background-color: #fff;
    }
    .box3 img{
        width: 120px;
        height: 120px;
        border-radius: 60px;
        float: left;
        border-bottom: 1px solid #ccc;
    }
    .admin{
        margin-top: 6px;
        padding-left: 170px;
        padding-top: 40px;
    }
    .Super{
        padding-left: 55px;
        padding-top: 40px;
        font-size: 13px;
        color: #ccc;
    }
    .a{
        border-top: 1px solid #ccc;
        margin-top: 60px;
    }
    .a1{
        padding-top: 20px;
        float: left;
    }
    .a2{
        padding-top: 20px;
        margin-left: 90px;
    }
    .a3{
        clear: both;
        float: left;
    }
    .a4{
        margin-left: 90px;
    }
    .box4{
        width: 400px;
        height: 250px;
        background-color: #fff;
        margin-top: 10px;
    }
    .yu{
        height: 45px;
        font-size: 18px;
        color: #000;
        border-bottom: 1px solid #ccc;
        line-height: 45px;
    }
    .progress{
        width: 300px;
        height: 20px;
        
    }
    .div{
        width: 1160px;
        height: 500px;
        background-color: #ccc;
        float: left;
        margin-left: 20px;
    }
    .div1{
        width: 1160px;
        height: 120px;
        background-color: #ccc;
    }
    .div2{
        margin-top: 5px;
        width: 350px;
        height: 100px;
        background-color: #fff;
        float: left;
    }
    .div2 img{
        float: left;
    }
    .div2 h1 {
        padding-top: 3px;
        padding-left: 200px;
    }
    .div2 p{
        padding-left: 208px;
    }


    .div3{
        margin-top: 5px;
        width: 350px;
        height: 100px;
        background-color: #fff;
        margin-left: 20px;
        float: left;
    }
    .div3 img{
        float: left;
    }
    .div3 h1 {
        padding-top: 3px;
        padding-left: 200px;
    }
    .div3 p{
        padding-left: 198px;
    }


    .div4{
        margin-top: 5px;
        width: 350px;
        height: 100px;
        background-color: #fff;
        margin-left: 20px;
        float: left;
    }
    .div4 img{
        float: left;
    }
    .div4 h1 {
        padding-top: 3px;
        padding-left: 200px;
    }
    .div4 p{
        padding-left: 215px;
    }
    .div5{
        margin-top: 10px;
        width: 1160px;
        height: 380px;
        background-color: #fff;
    }
    .div5 p {
        height: 45px;
        font-size: 18px;
        color: #000;
        border-bottom: 1px solid #ccc;
        line-height: 45px;
    }
    #all{
        margin-left: 1020px;
    }
    #con{
        width: 1160px;
        height: 200px;
        color: #000;
    }
    .com{
        height: 50px;
        color: #000;
        border-bottom: 1px solid #ccc;
        line-height: 50px;
    }
    #inp{
        height: 45px;
        font-size: 18px;
        color: #000;
        line-height: 45px;
    }

    #edit,#delete{
        float:right;
    }
    .da{    
        width: 100%;
        height: 500px;
        background-color: #ccc;
        margin-top: 10px;
    }
    #p{
        width: 782px;
        height: 500px;
        background-color: #fff;
        float: left;
    }
    
    #container {
        width:782px; 
        height: 500px; 
        margin: auto;
        }

    #p1{
        width: 782px;
        height: 500px;
        background-color: #fff;
        float: left;
        margin-left: 20px;
    }

    #main {
        width:782px; 
        height: 500px; 
        margin: auto;
        }
</style>
<body>
    <div class="box">
        <div class="box1">
            <div class="box2">
                <div class="box3">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.XputlnO9grWiLbf9vno6lgHaKB?w=188&h=255&c=7&r=0&o=5&dpr=1.2&pid=1.7" alt="">
                    <h2 class="admin">admin</h2>
                    <span class="Super">超级管理员</span>
                    <div class="a">
                        <p class="a1">上次登录时间:<span class="a2">2019-11-01</span></p>
                        <p class="a3">上次登录地点:<span class="a4">东莞</span></p>
                    </div>
                </div>
                <div class="box4">
                    <p class="yu">语言详情</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                          <span class="sr-only">40% Complete (success)</span>
                        </div>
                      </div>
                      <div class="progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                          <span class="sr-only">20% Complete</span>
                        </div>
                      </div>
                      <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                          <span class="sr-only">60% Complete (warning)</span>
                        </div>
                      </div>
                      <div class="progress">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                          <span class="sr-only">80% Complete (danger)</span>
                        </div>
                      </div>
                </div>
            </div>
            <div class="div">
                <div class="div1">
                    <div class="div2">
                        <img src="./img/效果图1.jpg" alt="">
                        <h1 class="h1"></h1>
                        <p class="impu">用户访问量</p>
                    </div>
                    <div class="div3">
                        <img src="./img/效果图2.jpg" alt="">
                        <h1 class="h2"></h1>
                        <p class="impu">系统消息</p>
                    </div>
                    <div class="div4">
                        <img src="./img/效果图3_03.jpg" alt="">
                        <h1 class="h3"></h1>
                        <p class="impu">数量</p>
                    </div>
                </div>
                <div class="div5">
                    <p>待办事项<a href="" id="all">添加</a></p>
                    <div class="con" >
                      
                    </div>
                </div>
            </div>
        </div>
        <div class="da">
            <div id="p">
                <div id="container"></div> 
            </div>
            <div id="p1">
                <div id="main"></div>
            </div>
        </div>
    </div>
</body>
<script>
$(function () {
    showAjax()
    
})
   //设置当前时间
    in4 = new Date();
    var nian = in4.getFullYear(),
      yve = in4.getMonth() + 1,
      r = in4.getDate(),
      w = in4.getHours(),
      e = in4.getMinutes(),
      t = in4.getSeconds(),
      jkhtml = ''
      jkhtml += `${nian}-${yve}-${r}-${w}:${e}:${t}`
    $('.a2').html(jkhtml)

function  showAjax(){
    //获取待办事项
    $.ajax({
          url: "http://47.94.4.201/index.php/index/admin/getTolist",
          type: "GET",
          datatype: "json",
          success: function (s) {
         // console.log(s);
          let ser=''
          for(var i in s.data){
              ser+=`<div class="com"><input type="checkbox">${s.data[i]}<a href="" id="edit">编辑</a><a href=""  onclick="fun()" id="delete">删除</a></div>`
          }
            $('.con').html(ser)
          }
    })

//     function fun(s) {
//     $(s).parent().parent().remove();
//   }
//获取进度条
$.ajax({
          url: "http://47.94.4.201/index.php/index/admin/getNum",
          type: "GET",
          datatype: "json",
          success: function (e) {
        //   console.log(e);
          let str = ''
        //   console.log(str)
          for(let n in e.data){
            str += `<p>${e.data[n]}</p>`
          }
          $('#progress').html(str)
        //   console.log(str)
          }
})
//获取右侧数量
$.ajax({
          url: "http://47.94.4.201/index.php/index/admin/getNolist",
          type: "GET",
          datatype: "json",
          success: function (t) {
          console.log(t);
          
          
          $('.h1').html(t.data[0].num)
          $('.h2').html(t.data[1].num)
          $('.h3').html(t.data[2].num)
         
          }
})
}

//实现地图标注自己的公司位置
    var map = new AMap.Map("container", {
        viewMode: '3D',
        zoom: 15,
        center: [113.428145,34.776671],
        resizeEnable: true
    });

var text = new AMap.Text({
        text:'纯文本标记',
        anchor:'center', // 设置文本标记锚点
        draggable:true,
        cursor:'pointer',
        // angle:10,  //倾斜
        style:{
            'padding': '.75rem 1.25rem',
            'margin-bottom': '1rem',
            'border-radius': '.25rem',
            'background-color': 'white',
            //'width': '0rem',
            'border-width': 0,
            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
            'text-align': 'center',
            'font-size': '20px',
            'color': 'blue'
        },
        position: [113.428145,34.776671]
    });

    var m3 = new AMap.Marker({
      position: [113.428161,34.775989],
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
    });
    map.add(m3);
    text.setMap(map);

// echarts 线性图
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [130, 100, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 290, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 240, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

myChart.setOption(option);

</script>
</html>